<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PVP牢房查看器</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>PVP牢房查看器</h1>
            <p class="subtitle">那么，现在是哪个闸开了呢？</p>
        </header>
        
        <div class="main-content">
            <div class="current-battle">
                <div class="widget-container">
                    <!-- 纷争前线模块 -->
                    <div class="widget-content" id="frontline-widget">
                        <div class="current-title">
                            <i class="fas fa-crosshairs"></i>
                            <h2>纷争前线</h2>
                        </div>
                        
                        <div class="battle-info" id="current-battle-info">
                            <!-- 动态加载当前战场 -->
                        </div>
                        
                        <div class="date-info" id="current-date-time">
                            <!-- 动态加载时间信息 -->
                        </div>
                        
                        <h3 class="next-title">下一个战场</h3>
                        <div class="next-battle" id="next-battle">
                            <!-- 动态加载下一个战场 -->
                        </div>
                    </div>
                    
                    <!-- 水晶冲突模块 -->
                    <div class="widget-content" id="crystal-widget" style="display: none;">
                        <div class="current-title">
                            <i class="fas fa-gem"></i>
                            <h2>水晶冲突</h2>
                        </div>
                        
                        <div class="crystal-timeline" id="crystal-timeline">
                            <!-- 动态加载时间轴 -->
                        </div>
                        
                        <div class="date-info" id="crystal-date-time">
                            <!-- 动态加载时间信息 -->
                        </div>
                    </div>
                </div>
                
                <!-- 小部件切换指示器 -->
                <div class="widget-indicators">
                    <div class="widget-indicator active" data-widget="frontline"></div>
                    <div class="widget-indicator" data-widget="crystal"></div>
                </div>
                
                <!-- 滑动区域 -->
                <div class="widget-swipe-area" id="widget-swipe-area"></div>
            </div>
            
            <div class="calendar-container">
                <div class="calendar-header">
                    <div class="calendar-month" id="calendar-month">2024年7月</div>
                    <div class="calendar-nav">
                        <button id="prev-month"><i class="fas fa-chevron-left"></i></button>
                        <button id="current-month">今天</button>
                        <button id="next-month"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                
                <div class="weekdays">
                    <div>日</div>
                    <div>一</div>
                    <div>二</div>
                    <div>三</div>
                    <div>四</div>
                    <div>五</div>
                    <div>六</div>
                </div>
                
                <div class="days" id="calendar-days">
                    <!-- 动态生成日历 -->
                </div>
            </div>
        </div>
                        <p style="text-align: center;">Hint：在模块上左右滑动可切换战场/水晶冲突信息。</p>
        <div class="info-section">
            <h3 class="info-title">战场类型</h3>
            
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-item-title">周边遗迹群（阵地战）</div>
                    <p>为什么台子上最多的是捕鱼人呢？</p>
                </div>
                
                <div class="info-item">
                    <div class="info-item-title">尘封秘岩（争夺战）</div>
                    <p>一杯茶，一包烟，秦王绕柱绕一天</p>
                </div>
                
                <div class="info-item">
                    <div class="info-item-title">荣誉野（碎冰战）</div>
                    <p>我超！冰！</p>
                </div>
                
                <div class="info-item">
                    <div class="info-item-title">昂萨哈凯尔（竞争战）</div>
                    <p>从你那01上给我下来!!</p>
                </div>
            </div>
            
            <div class="notes">
                <p><strong>注意：</strong>战场每天23:00(GMT+8)轮换。系统维护或版本更新可能导致轮换序列重置，届时请等待管理员重新设置计算的初始日期。</p>
                <p>当前基准数据更新日期：2025年7月19日。</p>
                <p>此页面使用你本机的时间提供战场和水晶冲突，如果与实际不同请先检查本机时间是否正确。</p>
            </div>
        </div>
        
        <footer>
            <p>FF14 PVP牢房查看器 | by 斗室绯雾 @ 红玉海 © 2025 | 基准数据更新日期: <span id="update-date">2025-07-17</span> | 感谢Deepseek老师对本栏目的大力支持</p>
        </footer>
    </div>
    <script src="js/battleSwitcher.js"></script>
    <script src="js/crystalSwitcher.js"></script>
    <script>
        // 小部件切换逻辑
        let currentWidget = 'frontline';
        let startX = 0;
        let currentX = 0;
        let isDragging = false;
        let isAnimating = false;

        const frontlineWidget = document.getElementById('frontline-widget');
        const crystalWidget = document.getElementById('crystal-widget');
        const indicators = document.querySelectorAll('.widget-indicator');
        const swipeArea = document.getElementById('widget-swipe-area');

        // 切换到指定小部件
        function switchToWidget(widgetName) {
            if (widgetName === currentWidget || isAnimating) return;
            
            isAnimating = true;
            const currentElement = currentWidget === 'frontline' ? frontlineWidget : crystalWidget;
            const targetElement = widgetName === 'frontline' ? frontlineWidget : crystalWidget;
            
            // 确定动画方向
            const isMovingLeft = (currentWidget === 'frontline' && widgetName === 'crystal');
            
            // 设置目标元素的初始状态
            targetElement.style.display = 'block';
            targetElement.classList.add(isMovingLeft ? 'slide-in-left' : 'slide-in-right');
            
            // 开始退出动画
            currentElement.classList.add(isMovingLeft ? 'slide-out-left' : 'slide-out-right');
            
            // 动画完成后的处理
            setTimeout(() => {
                // 隐藏当前元素并清理类
                currentElement.style.display = 'none';
                currentElement.classList.remove('slide-out-left', 'slide-out-right');
                
                // 显示目标元素并清理类
                targetElement.classList.remove('slide-in-left', 'slide-in-right');
                
                // 更新指示器
                indicators.forEach(indicator => {
                    indicator.classList.remove('active');
                    if (indicator.dataset.widget === widgetName) {
                        indicator.classList.add('active');
                    }
                });

                currentWidget = widgetName;
                isAnimating = false;
            }, 400); // 与CSS动画时间一致
        }

        // 指示器点击事件
        indicators.forEach(indicator => {
            indicator.addEventListener('click', () => {
                switchToWidget(indicator.dataset.widget);
            });
        });

        // 触摸/鼠标滑动事件
        swipeArea.addEventListener('mousedown', handleStart);
        swipeArea.addEventListener('touchstart', handleStart, { passive: false });
        swipeArea.addEventListener('mousemove', handleMove);
        swipeArea.addEventListener('touchmove', handleMove, { passive: false });
        swipeArea.addEventListener('mouseup', handleEnd);
        swipeArea.addEventListener('touchend', handleEnd);
        swipeArea.addEventListener('mouseleave', handleEnd);

        function handleStart(e) {
            if (isAnimating) return;
            isDragging = true;
            startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
            currentX = startX;
            
            // 防止文本选择
            e.preventDefault();
        }

        function handleMove(e) {
            if (!isDragging || isAnimating) return;
            e.preventDefault();
            currentX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
        }

        function handleEnd(e) {
            if (!isDragging || isAnimating) return;
            isDragging = false;

            const diffX = currentX - startX;
            const threshold = 50; // 滑动阈值

            if (Math.abs(diffX) > threshold) {
                if (diffX > 0 && currentWidget === 'crystal') {
                    // 向右滑动，切换到纷争前线
                    switchToWidget('frontline');
                } else if (diffX < 0 && currentWidget === 'frontline') {
                    // 向左滑动，切换到水晶冲突
                    switchToWidget('crystal');
                }
            }
        }
    </script>
</body>
</html>
